<template>
	<view>
		<view class="comment">
			<view class="comment-list">
				<view class="comment-item" v-for="(comment,key) in comments" :key="key">
					<view class="comment-time">
						{{comment.addtime}}
					</view>
					<view class="comment-user">
						<image :src="comment.avatar" mode="" class="comment-avatar"></image>
						<view class="comment-userinfo">
							<view class="">
								<text>{{comment.nickname}}</text>
							</view>
							<view class="comment-phone">
								{{comment.phone}}
							</view>
						</view>
					</view>
					<view class="comment-scores">
						<view class="comment-score">
							门店环境：
							<view class="comment-stars" style="margin: 0;">
								<block v-for="i in 5" :key="i">
									<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=comment.environment_score-1"></image>
									<image src="../../../static/star-line.png" mode="" style="width: 24upx;height: 24upx;" v-else></image>
								</block>
							</view>
							/
							<view class="" style="margin-left: 10upx;width: 320upx;text-overflow: ellipsis;overflow: hidden;">
								{{comment.store_name}}
							</view>
						</view>
						<view class="comment-score">
							服务评分：
							<view class="comment-stars" style="margin: 0;">
								<block v-for="i in 5" :key="i">
									<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=comment.service_score-1"></image>
									<image src="../../../static/star-line.png" mode="" style="width: 24upx;height: 24upx;" v-else></image>
								</block>
							</view>
							/
							<view class="" style="margin-left: 10upx;">
								{{comment.staff_name}}
							</view>
						</view>
					</view>
					<view class="comment-content">
						{{comment.content}}
					</view>
					<view class="comment-images">
						<image :src="image" mode="" class="comment-image" v-for="(image,index) in comment.images" :key="index"></image>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				stop_id:0,
				comments:[],
			};
		},
		onLoad:function(e) {
			this.id=e.id;
			this.shop_id=e.shop_id,
			this.getComments()
		},
		methods:{
			getComments:function(){
				var that=this;
				that.ajax("/store/comments/",{
					id:this.id,
					store_id:this.shop_id,
					type:"service",
				},function(res){
					that.comments=res.data.data;
				});
			}
		}
	}
</script>

<style>
	.comment {
		background: #FFFFFF;
		margin: 30upx 20upx 0 20upx;
		padding: 32upx 24upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
	}
	
	.comment-header {
		display: flex;
		flex-direction: row;
	}
	
	.comment-title {
		color: #4B4B4B;
		font-size: 28upx;
		flex: 1;
	}
	
	.comment-count {
		font-size: 24upx;
		padding: 2upx;
		color: #ABABAB;
		flex: 1;
		text-align: right;
	}
	
	.comment-item {
		padding: 30upx 12upx 30upx 22upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		margin-top: 24upx;
		border-radius: 12upx;
	}
	
	.comment-user {
		display: flex;
		flex-direction: row;
	}
	
	.comment-avatar {
		width: 92upx;
		height: 92upx;
		border-radius: 50%;
	}
	
	.comment-userinfo {
		margin-left: 22upx;
		color: #4B4B4B;
		font-size: 28upx;
	}
	
	.comment-phone {
		font-size: 24upx;
		color: #8B8B8B;
	}
	
	.comment-stars {
		margin-left: 35upx;
		display: inline-block;
	}
	
	.comment-score {
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.comment-content {
		font-size: 24upx;
	}
	
	.comment-scores {
		font-size: 25upx;
		margin: 40upx 0;
	}
	
	.comment-image {
		margin-bottom: 10upx;
	}
	
	.comment-image {
		width: 160upx;
		height: 160upx;
		border-radius: 15upx;
		margin-right: 30upx;
	}
	
	.comment-time {
		color: #ABABAB;
		font-size: 24upx;
		margin-top: 10upx;
		text-align: right;
	}
</style>
